<template>
    <div id="manage">
        <div class="manage_top">
            <div class="form">
                <div style="margin: 15px 20px 0 20px">
                    <zy-select v-if="formConfig" :fromValue="queryForm" :formConfig="formConfig" @search="search" @resetForm="resetForm" :actions="actions"></zy-select>
                </div>
                <div style="height: 40px; display: flex; margin: 10px 20px 0 20px">
                    <div class="table_title">{{ table_title }}管理</div>
                    <div class="btns">
                        <el-button v-for="item in actions" :key="item.label" :icon="item.icon" @click="item.click()">{{ item.label }}</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="manage_bottom">
            <div class="table">
                <div class="table_mask"></div>
                <zy-table :loading="loading" :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage" @changeID="changeID"></zy-table>
            </div>
        </div>
        <List ref="list" @indexSearch="searchBtn" @handzydialog="handzydialog" />
        <handle-warn ref="handleWarn" @search="search"></handle-warn>
        <downLoad ref="download" />
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { requestApi } from '@/requset/api'
import SearchManage from '@/components/basic/SearchManage.vue'
import List from './List.vue'
import HandleWarn from './HandleWarn.vue'
import DownLoad from './DownLoad.vue'

import { formConfig, column, colors } from './formConfig.js'

export default {
    extends: SearchManage,
    data() {
        return {
            table_title: '告警',
            url: 'warn',
            formConfig: null,
            tableColumn: null,
            tableData: [],
            actions: [
                {
                    label: '导出',
                    icon: 'el-icon-download',
                    click: () => {
                        this.$refs.download.doOpen()
                    },
                    if: () => this.operate,
                },
            ],
            queryForm: {
                size: 20,
                page: 1,
                device_name: null,
                scope_id_list: [],
                scope_id: null,
                warn_level: null,
                warn_source: null,
            },
            queryFormC: {
                size: 20,
                page: 1,
                device_name: null,
                scope_id_list: [],
                scope_id: null,
                warn_level: null,
                warn_source: null,
            },
        }
    },
    components: {
        List,
        HandleWarn,
        DownLoad,
    },
    methods: {
        setQueryForm(queryForm, query) {
            let { warn_level, device_name, zone_id, factory_id, company_id, group_id } = query
            if (warn_level) this.queryForm.warn_level = warn_level
            if (device_name) this.queryForm.device_name = device_name
            let setList = (userLevel, list) => {
                if (userLevel === 'zone') {
                    return list.slice(3, 4)
                } else if (userLevel === 'factory') {
                    return list.slice(2, 4)
                } else if (userLevel === 'company') {
                    return list.slice(1, 4)
                } else {
                    return list
                }
            }
            if (zone_id) {
                this.$nextTick(() => {
                    queryForm.scope_id_list = setList(sessionStorage.getItem('userLevel'), [Number(group_id), Number(company_id), Number(factory_id), Number(zone_id)])
                    this.searchBtn()
                })
            } else this.searchBtn()
        },
        delete(data) {
            this.$confirm('确认删除此条数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    requestApi('post', this.url + '/device/delete', data).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功',
                            })
                            if (this.tableData.length === 1 && this.queryForm.page !== 0) {
                                this.queryForm.page--
                            }
                            this.searchBtn()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
    },
    computed: {
        ...mapState('backstage', ['backstageData', 'deviceType']),
        tags() {
            if (this.stat) {
                const data = [
                    { title: '总数', num: this.pagination.total },
                    { title: '一般', num: this.stat.level_1 },
                    { title: '中等', num: this.stat.level_2 },
                    { title: '严重', num: this.stat.level_3 },
                ]
                return data.map((item, index) => {
                    return {
                        title: item.title,
                        num: item.num,
                        color: colors[index % colors.length],
                    }
                })
            } else
                return [
                    { title: '告警数', num: 0 },
                    { title: '严重', num: 0 },
                    { title: '中等', num: 0 },
                    { title: '一般', num: 0 },
                ]
        },
    },
    mounted() {},
    created() {
        this.setQueryForm(this.queryForm, this.$route.query)
        formConfig[1].options = this.backstageData
        this.formConfig = formConfig
        column[column.length - 1].buttons = [
            {
                text: '详情',
                click: (val) => this.$refs.list.doOpen(val),
                icon: 'el-icon-s-comment',
            },
            {
                text: '处理',
                click: (val) => this.$refs.handleWarn.doOpen(val),
                if: () => this.operate,
                icon: 'el-icon-edit',
            },
            {
                text: '删除',
                click: (val) => this.delete(val),
                if: () => this.operate,
                icon: 'el-icon-delete',
            },
        ]
        this.tableColumn = column
    },
}
</script>
